<template>
  <div class="back-top" :style="visible ? '' : 'display: none'" @click="handleClick">
    TOP
  </div>
</template>

<script>
export default {
  name: 'BackTop',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="less" scoped>
  .back-top {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid orange;
    border-radius: 50px;
    background: skyblue;
    position: fixed;
    right: 20px;
    bottom: 120px;
  }
</style>
